<template>
    <div class="dashboard-container">
        <el-card>
            <div ref="monthWorkOrder" class="echarts-box"
                style="width: 800px; height: 400px; margin-top: 20px;display: inline-block;"></div>
            <div ref="monthWorkOrders" class="echarts-box"
                style="width: 800px; height: 400px; margin-top: 20px;display: inline-block;"></div>
            <div ref="monthWorkOrdersss" class="echarts-box"
                style="width: 800px; height: 400px; margin-top: 20px;display: inline-block;"></div>

        </el-card>
    </div>
</template>

<script>
import { submitApiselectPie, } from "@/api/data";
var myChart;
export default {
    data() {
        return {
            datapie: [],
            datapies: [],
            datapiesss: [],


        }
    },
    async created() {

    },
    async mounted() {
        let res = await submitApiselectPie({ "stat": "DELIVRD" });
        let res1 = await submitApiselectPie({ "stat": "REJECTED" });
        let ressss = await submitApiselectPie({ "stat": "" });

        this.datapie = res
        this.datapies = res1
        this.datapiesss = ressss


        this.initMonthWorkOrder();
        this.initMonthWorkOrders();
        this.initMonthWorkOrdersss();


    },

    methods: {
        initMonthWorkOrder() {
            let myChart = this.$echarts.init(this.$refs.monthWorkOrder);
            let options = {
                title: {
                    text: '地区调用数据分析图',
                    subtext: '成功调用',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '所占百分比/单位%',
                        type: 'pie',
                        radius: '50%',
                        data: this.datapie,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(options);
        },
        initMonthWorkOrders() {
            let myChart = this.$echarts.init(this.$refs.monthWorkOrders);
            let options = {
                title: {
                    text: '地区调用数据分析图',
                    subtext: '失败调用',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '所占百分比/单位%',
                        type: 'pie',
                        radius: '50%',
                        data: this.datapies,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(options);
        },
        initMonthWorkOrdersss() {
            let myChart = this.$echarts.init(this.$refs.monthWorkOrdersss);
            let options = {
                title: {
                    text: '地区调用数据分析图',
                    subtext: '总调用',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '百分比/单位%',
                        type: 'pie',
                        radius: '50%',
                        data: this.datapiesss,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(options);
        },
    },
};
</script>